<template>
  <div>
    <div class="flex-row p-3">
      <text>认证图片</text>
      <text class="small text-muted">(请上传清晰可见的照片)</text>
    </div>

    <image class="ic-image"
           v-if="ic.farmLicenseImg"
           :src="ic.farmLicenseImg"
           @click="pick"></image>

    <text class="icon add-icon"
          v-else
          @click="pick">&#xe69f;</text>

    <vm-cell label="名称">
      <input slot="title"
             placeholder="请输入工商认证组织的名称"
             v-model="ic.farmName"
             class="input" />
    </vm-cell>

    <vm-cell label="编号">
      <input slot="title"
             placeholder="请输入工商注册编号"
             v-model="ic.registerNo"
             class="input" />
    </vm-cell>

    <vm-button class="mt-3"
               text="提交"
               @buttonClicked="submit"></vm-button>
  </div>
</template>
<script>
import VmButton from '../../components/vm-button.vue'
import VmCell from '../../components/vm-cell.vue'
import {
  STORAGE_FARM
} from '../../plugins/constant'

export default {
  components: { VmButton, VmCell },
  props: {},
  data() {
    return {
      hasIc: false,
      ic: {
        id: '',
        farmName: '',
        farmLicenseImg: '',
        registerNo: ''
      },
      imgChange: false
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getParams()
  },
  methods: {
    getParams() {
      this.$router.getParams().then(res => {
        const ic = res || {}
        if (!ic.farmId) {
          this.hasIc = false
          return this.getFarm()
        }
        this.hasIc = true
        this.ic.id = ic.farmId
        this.ic.farmName = ic.registerName
        this.ic.registerNo = ic.registerNo
        this.ic.farmLicenseImg = ic.farmLicenseImg && ic.farmLicenseImg.length && ic.farmLicenseImg[0] || ''
      })
    },
    getFarm() {
      const farm = this.$storage.getSync(STORAGE_FARM) || {}
      this.ic.id = farm.id || ''
      this.ic.farmName = farm.farmName || ''
    },
    pick() {
      this.$picture.pick({
        maxCount: 1
      }).then(res => {
        this.imgChange = true
        this.ic.farmLicenseImg = res.length && res[0] || ''
      }).catch(err => {
        this.$notice.toast({ message: '选择图片失败，请重试！' })
      })
    },
    submit() {
      if (!this.ic.farmLicenseImg) {
        return this.$notice.toast({ message: '请上传认证图片' })
      }
      if (this.imgChange) {
        this.$oss.uploadImage({
          files: [this.ic.farmLicenseImg]
        }).then(res => {
          this.putIc(res[0])
        }).catch(err => {
          this.$notice.toast({ message: '上传图片失败，请重试！' })
        })
      } else {
        this.putIc(this.ic.farmLicenseImg)
      }
    },
    putIc(image) {
      this.$http({
        method: 'PUT',
        name: 'industrial.farm.ic.put',
        data: {
          id: this.ic.id,
          farmName: this.ic.farmName,
          farmLicenseImg: image ? `["${image}"]` : '',
          registerNo: this.ic.registerNo
        },
        errorMsg: '认证失败，请重试'
      }).then(res => {
        this.$notice.toast({ message: '认证成功' })
        this.$router.setBackParams({ type: 2 })
        this.$router.back()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.icon {
  font-family: alicon;
}
.flex-row {
  flex-direction: row;
  align-items: center;
}
.small {
  font-size: 26px;
}
.text-muted {
  color: #999;
}
.p-3 {
  padding: 30px;
}
.mt-3 {
  margin-top: 30px;
}

.add-icon {
  width: 180px;
  height: 180px;
  text-align: center;
  line-height: 180px;
  font-size: 80px;
  background-color: $gray-300;
  color: $gray-600;
  margin-left: 30px;
  margin-bottom: 30px;
}
.ic-image {
  width: 180px;
  height: 180px;
  margin-left: 30px;
  margin-bottom: 30px;
}
.input {
  flex: 1;
  height: 60px;
  font-size: 30px;
  tint-color: #999;
  text-align: right;
}
</style>
